<template>
  <el-form ref="ruleFormRef" class="add-form" :rules="rules" :model="search">
    <el-row :gutter="20">
      <template v-for="(item, index) in formList" :key="index">
        <el-col :span="12" v-if="item.inputType">
          <el-form-item
            :label="item.itemNameChn"
            v-if="item.inputType == 'text'"
            :prop="item.itemName"
          >
            <el-input
              v-model="search[item.itemName]"
              :placeholder="'请输入' + item.itemNameChn"
              clearable
              :maxlength="item.itemLength"
            />
          </el-form-item>
          <el-form-item
            :label="item.itemNameChn"
            v-else-if="item.inputType == 'number'"
            :prop="item.itemName"
          >
            <el-input
              v-model.number="search[item.itemName]"
              :placeholder="'请输入' + item.itemNameChn"
              clearable
            />
          </el-form-item>
          <el-form-item
            :label="item.itemNameChn"
            v-else-if="item.inputType == 'multi_select'"
            :prop="item.itemName"
            clearable
          >
            <el-select
              v-model="search[item.itemName]"
              :placeholder="'请选择' + item.itemNameChn"
              clearable
            >
              <el-option
                v-for="option in item.options"
                :key="option.code"
                :label="option.value"
                :value="option.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="item.itemNameChn"
            v-else-if="item.inputType == 'date'"
            :prop="item.itemName"
          >
            <el-date-picker
              v-model="search[item.itemName]"
              type="date"
              style="width: 100%"
              placeholder="选择日期"
               value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive, watch } from "vue";

const props = defineProps({
  formList: Array,
});

const emit = defineEmits(["update:modelValue", "search"]);
let ruleFormRef = ref(null);
let search = reactive({});
let rules = reactive({});
watch(
  () => props.formList,
  (newVal) => {
    newVal.forEach((item) => {
      search[item.itemName] = "";
      debugger;
      rules[item.itemName] = [
        {
          required: true,
          message: `请输入${item.itemNameChn}`,
          trigger: "blur",
        },
      ];
    });
  },
  {
    immediate: true,
  }
);

watch(search, (newVal) => {
  emit("update:modelValue", newVal);
});

const reset = (ruleFormRef) => {
  ruleFormRef.resetFields();
};

const submitValue = async () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((valid, fields) => {
      if (valid) {
        resolve(true);
      } else {
        reject(false);
      }
    });
  });
};

defineExpose({
  submitValue,
  reset,
});
</script>

<style scoped>
.add-form {
  padding: 0 35px;
}
</style>
